<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="app">
        
        <form>
            
            <span>{{ count }} / 30</span>

            <textarea v-model="text"></textarea>
            
            <button v-if="count <= 30">Submit</button>

        </form>
    
    </div>

     <script src="js/vue.min.js"></script>
     <script>
         new Vue({
            el: "#app",
            data: {
                text: ''
            },
            computed:{
                count: function(){
                    return this.text.length;
                }
            }
         })
     </script>
</body>
</html>

<style type="text/css">
	* {
	    box-sizing: border-box;
	}
	
	body {
	    font-family: 'Helvetica', sans-serif;
	}
	
	textarea {
	    width: 350px;
	    height: 140px;
	    margin: 5px 0 10px;
	    font-size: 16px;
	}
	
	textarea, button, span {
	    display: block
	}
</style>